<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="weui-flex type">
					<div class="weui-flex__item on">币币</div>
					<div class="weui-flex__item">杠杆</div>
					<div class="weui-flex__item">法币</div>
				</div>
				<div class="title">ATM / AIDT</div>
				<div class="weui-flex box">
					<div class="flex__item">
						<div class="tab_item">
							<div class="tab1" :class="{'on': index == 0}" @click="getIndex(0)">买入</div>
							<div class="tab2" :class="{'on': index == 1}" @click="getIndex(1)">卖出</div>
						</div>
						<div v-show="index == 0">
							<div class="bt">现在买入</div>
							<div class="wire">
								<span>价格(AIDT)</span>
								<van-field v-model="value" input-align="right" :placeholder="pvalue" disabled/>
							</div>
							<div class="val" v-if="line == false" v-text="'≈ ' + bottomPrice + ' CNY'">≈758.2000CNY</div>
							<div class="val" v-if="line == true" v-text="'≈ ' + pbottomPrice + ' CNY'">≈758.2000CNY</div>
							<div class="wire">
								<span>数量(ATM)</span>
								<van-field v-model="value2" input-align="right" placeholder="" @input="getValue(0,value2)" />
							</div>
							<div class="val" v-text="'可用 ' + pay + ' AIDT'">可用 758ATM</div>
							<van-row gutter="6" class="choice">
								<van-col span="6" @click.native="on(1)"><span :class="sum1">25%</span></van-col>
								<van-col span="6" @click.native="on(2)"><span :class="sum2">50%</span></van-col>
								<van-col span="6" @click.native="on(3)"><span :class="sum3">75%</span></van-col>
								<van-col span="6" @click.native="on(4)"><span :class="sum4">100%</span></van-col>
							</van-row>
							<div class="deal">交易额: <span v-text="AIDT">0.0000</span> AIDT</div>
							<van-button slot="button" size="normal" type="info" disabled>立即买入</van-button>
						</div>
						<div v-show="index == 1">
							<div class="bt">现在卖出</div>
							<div class="wire">
								<span>价格(AIDT)</span>
								<van-field v-model="value3" input-align="right" :placeholder="pvalue3" disabled/>
							</div>
							<div class="val" v-if="line2 == false" v-text="'≈ ' + topPrice + ' CNY'">≈758.2000CNY</div>
							<div class="val" v-if="line2 == true" v-text="'≈ ' + ptopPrice + ' CNY'">≈758.2000CNY</div>
							<div class="wire">
								<span>数量(ATM)</span>
								<van-field v-model="value4" input-align="right" placeholder="" @input="getValue(1,value4)" />
							</div>
							<div class="val" v-text="'可用 ' + pay2 + ' ATM'">可用 758ATM</div>
							<van-row gutter="6" class="choice">
								<van-col span="6" @click.native="on2(1)"><span :class="sum12">25%</span></van-col>
								<van-col span="6" @click.native="on2(2)"><span :class="sum22">50%</span></van-col>
								<van-col span="6" @click.native="on2(3)"><span :class="sum32">75%</span></van-col>
								<van-col span="6" @click.native="on2(4)"><span :class="sum42">100%</span></van-col>
							</van-row>
							<div class="deal">交易额: <span v-text="AIDT2">0.0000</span> AIDT</div>
							<van-button slot="button" size="normal" type="danger" @click.native="Login">立即卖出</van-button>
						</div>
					</div>
					<div class="flex__item" style="padding-left:10px;">
						<div class="price_float">
							<div class="flex__item">最新价</div>
							<div>数量</div>
						</div>
						<div v-for="(item,index) in buy" :key="Math.random()" v-if="buy != ''">
							<div class="price_float">
								<div class="flex__item red" v-text="parseFloat(item.price).toFixed(5).slice(0,-1)" v-if="item" @click="getVal2(parseFloat(item.price).toFixed(5).slice(0,-1))">0.2154</div>
								<div class="flex__item red" v-else @click="buyVal(0)">----</div>
								<div v-text="parseFloat(item.num).toFixed(5).slice(0,-1)" v-if="item">0.2154</div>
								<div v-else>----</div>
							</div>
						</div>
						<div class="statistics">
							<div class="red" v-if="valIndex == 1" v-text="topMoney">0.2154</div>
							<div class="green" style="font-size: 14px;" v-if="valIndex == 0" v-text="bottomMoney">0.2154</div>
							<div class="" v-if="valIndex == 1" v-text="'≈ ' + topPrice + ' CNY'">≈758.2000CNY</div>
							<div class="" v-if="valIndex == 0" v-text="'≈ ' + bottomPrice + ' CNY'">≈758.2000CNY</div>
						</div>
						<div v-for="(item,index) in sell" :key="Math.random()" v-if="sell != ''">
							<div class="price_float">
								<div class="flex__item green" v-text="parseFloat(item.price).toFixed(5).slice(0,-1)" v-if="item" @click="getVal(parseFloat(item.price).toFixed(5).slice(0,-1))">0.2154</div>
								<div class="flex__item green" v-else @click="sellVal(0)">----</div>
								<div v-text="parseFloat(item.num).toFixed(5).slice(0,-1)" v-if="item">0.2154</div>
								<div v-else>----</div>
							</div>
						</div>
					</div>
				</div>
				<!----当前委托----->
				<div class="weui-flex wt vux-1px-b">
					<div class="weui-flex__item">当前委托</div>
					<div class="operate" @click="getCommission" v-if="index == 0">一键买单委托<i></i></div>
				</div>
				<div class="weui-cells measure">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
						<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
							<div v-for="(item,index) in list" :key="item.create_time">
								<div class="weui-cell" @click="inTwoTree(new Date(item.create_time).toLocaleString('chinese', { hour12: false }),item.trade_type)">
									<div class="weui-cell__hd">
										<i class="rise" v-if="item.trade_type == 1">买</i>
										<i class="fall" v-if="item.trade_type == 2">卖</i>
									</div>
									<div class="time" style="position: absolute;left: 60px;">
										<div style="color: #7b83a0;">交易时间</div>
										<div v-text="new Date(item.create_time).toLocaleString('chinese', { hour12: false })"></div>
									</div>
									<div class="time" style="position: absolute;right: 0px;">
										<van-icon name="arrow" color="#7b83a0" />
									</div>
								</div>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
		<van-popup v-model="show2" position="bottom" class="buyo">
			<div style="padding: 15px 25px;color: #3fb776;">
				<span>安全验证</span>
				<span style="font-size: 14px;color: rgb(133, 141, 172);float: right;padding-top: 3px;" @click="quit">取消</span>
			</div>
			<div style="background: rgb(40,44,62);padding: 10px 20px;">
				<div style="font-size: 14px;color: rgb(133, 141, 172);padding-bottom: 10px;">XIBRUSH资金交易密码</div>
				<van-field placeholder="请输入XIBRUSH交易密码" maxlength="6" type="password" v-model.trim="payPwd" />
				<div style="padding: 10px 0px;color: rgb(63, 183, 118);font-size: 14px;" @click="nextUpdatePayPassword">
					忘记密码？
				</div>
				<van-button size="normal" style="border-radius: 5px;background-color: rgb(60,66,84);border-color: rgb(60,66,84);color: white;" :loading="load" @click="isOk">确认</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	let _this;
	import { Dialog } from 'vant';
	import { base, money, otc, safety, mine } from './../utils/api';
	export default {
		data() {
			return {
				k: '', // 凭证K值
				v: '', // 凭证V值
				sum1: '',
				sum2: '',
				sum3: '',
				sum4: '',
				sum12: '',
				sum22: '',
				sum32: '',
				sum42: '',
				index: 0,
				value: '',
				value2: '',
				value3: '',
				value4: '',
				load: false,
				show2: false,
				payPwd: '',
				buy: [],
				sell: [],
				valIndex: 0,
				pvalue: '',
				pvalue3: '',
				topMoney: '', // 卖出最高价
				bottomMoney: '', // 买入最低价
				topPrice: '', // 卖出的计算价格
				bottomPrice: '', // 买入的计算价格
				ptopPrice: '', // 卖出的计算价格
				pbottomPrice: '', // 买入的计算价格
				line: false,
				line2: false,
				pay: '', // 买入 AIDT
				pay2: '', // 卖出 ATM
				AIDT: parseFloat(0).toFixed(5).slice(0, -1),
				AIDT2: parseFloat(0).toFixed(5).slice(0, -1),
				list: [], // 涨跌幅榜
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				typeId: this.$route.query.typeId
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			// 页面不需要登录就能访问切页面上有请求接口，登录和不登录的时候。需要添加此代码
			if(sessionStorage.token) {
				this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
			}
			this.getList(); // 轮询之前先请求一次[右侧买卖接口]
		},
		mounted() {
			this.initList();
			this.getAtm();
			if(this.typeId) {
				this.index = this.typeId;
				this.$nextTick(() => {
					this.valIndex = this.index;
				})
			}
		},
		watch: {
			value2: function() {
				let value2 = '' + this.value2;
				value2 = value2
					.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
					.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
					.replace('.', '$#$')
					.replace(/\./g, '')
					.replace('$#$', '.')
					.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
				if(value2.indexOf('.') < 0 && value2 != '') {
					// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					value2 = parseFloat(value2);
				}
				this.value2 = value2;
			},
			value4: function() {
				let value4 = '' + this.value4;
				value4 = value4
					.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
					.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
					.replace('.', '$#$')
					.replace(/\./g, '')
					.replace('$#$', '.')
					.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
				if(value4.indexOf('.') < 0 && value4 != '') {
					// 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					value4 = parseFloat(value4);
				}
				this.value4 = value4;
			},
			payPwd: function() {
				this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 只能输入数字
			}
		},
		methods: {
			Login() {
				if(!this.value4) {
					this.$toast("卖出数量不能为空！");
					return false;
				}
				safety.getTransaction().then(res => { // 判断是否设置支付密码
					if(res.code == 200) {
						if(res.data == 1) { // 1：已设置
							mine.getPersonal().then(res => {
								if(res.data.idcardVerifyStatus == 1) { // 已实名成功
									this.show2 = true;
									// 弹出的时候清空支付密码
									this.payPwd = '';
								} else {
									Dialog.confirm({
										message: '实名认证未完成，请完成实名认证！',
										confirmButtonText: '实名认证',
										cancelButtonText: '取消',
										cancelButtonColor: 'white'
									}).then(() => {
										this.$router.push({
											path: '/Authentication2',
											query: {
												roid: 'Transaction'
											}
										});
									}).catch(() => {
										this.$router.push({
											path: '/Transaction'
										})
									});
								}
							})
						} else {
							Dialog.confirm({
								message: '您未设置支付密码，请设置支付密码！',
								confirmButtonText: '立即设置',
								cancelButtonText: '稍后设置',
								cancelButtonColor: 'white'
							}).then(() => {
								_this.$router.push({
									path: '/UpdatePayPwd',
									query: {
										type: 0,
										roid: 'Transaction'
									}
								})
							}).catch(() => {
								this.$router.push({
									path: 'Transaction'
								})
							});
						}
					} else {
						this.$toast(res.msg);
					}
				})
			},
			quit() {
				this.show2 = false;
			},
			isOk() {
				if(!this.payPwd) {
					this.$toast("支付密码不能为空！");
					return false;
				}
				this.load = true;
				base.getCredentials().then(res => {
					this.k = res.data.k;
					this.v = res.data.v;
					if(this.index == 1) {
						let AIDT;
						if(this.line2 == false) {
							AIDT = this.pvalue3;
						} else if(this.line2 == true) {
							AIDT = this.value3;
						}
						money.getPay({
							"AIDT": AIDT,
							"atm": this.value4,
							"key": this.k,
							"password": this.rsaEncrypt(this.payPwd + ',' + this.v),
						}).then(res => {
							if(res.code == 200) {
								this.$toast("卖出成功！");
								// 卖出成功后清除数量
								this.value4 = '';
							} else {
								this.$toast(res.msg);
							}
							this.getAtm();
							this.getGain();
							this.show2 = false;
							this.load = false;
						})
					} else if(this.index == 0) {
						money.getBuy({
							"key": this.k,
							"password": this.rsaEncrypt(this.payPwd + ',' + this.v),
						}).then(res => {
							if(res.code == 200) {
								this.$toast("当前订单委托成功！");
							} else {
								this.$toast(res.msg);
							}
							this.getAtm();
							this.getGain();
							this.show2 = false;
							this.load = false;
						})
					}
				})
			},
			getIndex(index) { // 买入和卖出的切换
				this.index = index;
				this.valIndex = index;
			},
			initList() {
				this.myInterval = window.setInterval(() => {
					setTimeout(() => {
						this.getList(); // 调用接口的方法[轮询]
					}, 1);
				}, 3000);
			},
			getList() { // 查询右面应该显示的数据(后台没有数据的时候前端自己用假数据补上去，数据的真实值全部为0,此地方和请勿随便修改，后端无数据直接就是空，前端自己补数据，切记切记)
				money.getPlatformBuyOrSell({
					"order": 1,
					"typeId": 2,
					"currencies": 1,
					"size": 5
				}).then(acct => {
					if(acct.code == 200) {
						let buy = acct.data;
						let buyLengthen = 5;
						if(buy.length < buyLengthen) {
							let arrTemp = new Array(buyLengthen - buy.length);
							buy = buy.concat(arrTemp);
						}
						_this.buy = buy;
						if(acct.data) { // 计算卖出的最高价
							let money = parseFloat(acct.data[0].price).toFixed(5).slice(0, -1);
							_this.topMoney = money;
						}
						_this.$nextTick(() => {
							_this.sumPrice();
							_this.moValue();
						})
					}
				})
				money.getPlatformBuyOrSell({
					"order": 0,
					"typeId": 1,
					"currencies": 1,
					"size": 5
				}).then(perms => {
					if(perms.code == 200) {
						let sell = perms.data;
						let sellLengthen = 5;
						if(sell.length < sellLengthen) {
							let arrTemp = new Array(sellLengthen - sell.length);
							sell = sell.concat(arrTemp);
						}
						_this.sell = sell;
						if(perms.data) { // 计算买入的最低价
							let money = parseFloat(perms.data[0].price).toFixed(5).slice(0, -1);
							_this.bottomMoney = money;
						}
						_this.$nextTick(() => {
							_this.sumPrice();
							_this.moValue();
						})
					}
				})
			},
			sumPrice() { // 计算有多少 AIDT
				this.axios.all([money.getPrice({
						"num": _this.bottomMoney ? _this.bottomMoney : '0'
					}), money.getPrice({
						"num": _this.topMoney ? _this.topMoney : '0'
					})])
					.then(_this.axios.spread(function(acct, perms) {
						// 两个请求现在都执行完成
						_this.bottomPrice = acct.data;
						_this.topPrice = perms.data;
					}))
			},
			moValue() { // 进入页面首先默认赋值给 AIDT 的禁止输入框
				this.pvalue = this.bottomMoney;
				this.pvalue3 = this.topMoney;
			},
			getVal(val) { // 买入
				this.line = true;
				this.value = val;
				this.getValue(0, this.value2); // 点击的时候计算下面的 AIDT
				money.getPrice({
					"num": this.value
				}).then(res => {
					this.pbottomPrice = res.data;
				})
			},
			getVal2(val) { // 卖出
				this.value3 = val;
				this.line2 = true;
				this.getValue(1, this.value4); // 点击的时候计算下面的 AIDT
				money.getPrice({
					"num": this.value3
				}).then(res => {
					this.ptopPrice = res.data;
				})
			},
			getAtm() { // 查询账户中可用的 AIDT 数量
				this.axios.all([otc.getWallet_coin({
						"accountTypeId": 2
					}), otc.getWallet_coin({
						"accountTypeId": 4
					})])
					.then(_this.axios.spread(function(acct, perms) {
						_this.pay = parseFloat(acct.data.availableNum).toFixed(5).slice(0, -1);
						_this.pay2 = parseFloat(perms.data.availableNum).toFixed(5).slice(0, -1);
					}))
			},
			on(on) {
				if(on == 1) {
					this.sum1 = 'on';
					this.sum2 = '';
					this.sum3 = '';
					this.sum4 = '';
					this.value2 = parseFloat(this.pay * 0.25).toFixed(5).slice(0, -1);
				} else if(on == 2) {
					this.sum1 = '';
					this.sum2 = 'on';
					this.sum3 = '';
					this.sum4 = '';
					this.value2 = parseFloat(this.pay * 0.5).toFixed(5).slice(0, -1);
				} else if(on == 3) {
					this.sum1 = '';
					this.sum2 = '';
					this.sum3 = 'on';
					this.sum4 = '';
					this.value2 = parseFloat(this.pay * 0.75).toFixed(5).slice(0, -1);
				} else if(on == 4) {
					this.sum1 = '';
					this.sum2 = '';
					this.sum3 = '';
					this.sum4 = 'on';
					this.value2 = parseFloat(this.pay * 1).toFixed(5).slice(0, -1);
				}
			},
			on2(on) {
				if(on == 1) {
					this.sum12 = 'on';
					this.sum22 = '';
					this.sum32 = '';
					this.sum42 = '';
					this.value4 = parseFloat(this.pay2 * 0.25).toFixed(5).slice(0, -1);
				} else if(on == 2) {
					this.sum12 = '';
					this.sum22 = 'on';
					this.sum32 = '';
					this.sum42 = '';
					this.value4 = parseFloat(this.pay2 * 0.5).toFixed(5).slice(0, -1);
				} else if(on == 3) {
					this.sum12 = '';
					this.sum22 = '';
					this.sum32 = 'on';
					this.sum42 = '';
					this.value4 = parseFloat(this.pay2 * 0.75).toFixed(5).slice(0, -1);
				} else if(on == 4) {
					this.sum12 = '';
					this.sum22 = '';
					this.sum32 = '';
					this.sum42 = 'on';
					this.value4 = parseFloat(this.pay2 * 1).toFixed(5).slice(0, -1);
				}
				this.getValue(1, this.value4);
			},
			getValue(type, val) {
				if(type == 0) {
					if(this.line == false) {
						this.AIDT = parseFloat(val * this.pvalue).toFixed(5).slice(0, -1);
					} else if(this.line == true) {
						this.AIDT = parseFloat(val * this.value).toFixed(5).slice(0, -1);
						//console.log("买入" + this.AIDT);
					}
				} else if(type == 1) {
					if(this.line2 == false) {
						this.AIDT2 = parseFloat(val * this.pvalue3).toFixed(5).slice(0, -1);
					} else if(this.line2 == true) {
						this.AIDT2 = parseFloat(val * this.value3).toFixed(5).slice(0, -1);
						//console.log("卖出" + this.AIDT2);
					}
				}
			},
			getCommission() { // 一键买单委托
				safety.getTransaction().then(res => { // 判断是否设置支付密码
					if(res.code == 200) {
						if(res.data == 1) { // 1：已设置
							mine.getPersonal().then(res => {
								if(res.data.idcardVerifyStatus == 1) { // 已实名成功
									Dialog.confirm({
										message: '是否一键买单委托？',
										confirmButtonText: '是',
										cancelButtonText: '否',
										cancelButtonColor: 'white'
									}).then(() => {
										this.show2 = true;
										// 弹出的时候清空支付密码
										this.payPwd = '';
									}).catch(() => {
										this.getAtm();
										this.getGain();
									});
								} else {
									Dialog.confirm({
										message: '实名认证未完成，请完成实名认证！',
										confirmButtonText: '实名认证',
										cancelButtonText: '取消',
										cancelButtonColor: 'white'
									}).then(() => {
										this.$router.push({
											path: '/Authentication2',
											query: {
												roid: 'Transaction'
											}
										});
									}).catch(() => {
										this.$router.push({
											path: '/Transaction'
										})
									});
								}
							})
						} else {
							Dialog.confirm({
								message: '您未设置支付密码，请设置支付密码！',
								confirmButtonText: '立即设置',
								cancelButtonText: '稍后设置',
								cancelButtonColor: 'white'
							}).then(() => {
								_this.$router.push({
									path: '/UpdatePayPwd',
									query: {
										type: 0,
										roid: 'Transaction'
									}
								})
							}).catch(() => {
								this.$router.push({
									path: 'Transaction'
								})
							});
						}
					} else {
						this.$toast(res.msg);
					}
				})
			},
			getGain() { // 涨幅榜
				money.getMemberBuyOrSell({
					"typeId": '',
					"currencies": '',
					"current": this.current,
					"size": this.size
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			onRefresh() {
				this.getGain();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getGain();
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			inTwoTree(create_time, trade_type) { // 跳转到详情
				this.$router.push({
					path: '/TransactionInfo',
					query: {
						create_time: create_time,
						trade_type: trade_type
					}
				})
			},
			nextUpdatePayPassword() { // 忘记支付密码
				this.$router.push({
					path: '/UpdateMb'
				});
			}
		},
		destroyed() {
			clearInterval(this.myInterval)
		},
		filters: {

		}
	}
</script>

<style lang="less" scoped>
	.type {
		width: 95%;
		height: 28px;
		line-height: 28px;
		background: #212639;
		text-align: center;
		color: #848cab;
		margin: 10px auto;
		.on {
			background: #4d597e;
			color: #fff;
		}
	}
	
	.title {
		font-size: 16px;
		padding-left: 10px;
	}
	
	.box {
		padding: 10px 10px 30px;
		border-bottom: 10px solid #282d41;
		.bt {
			margin: 6px 0;
			font-size: 13px;
		}
		.flex__item {
			width: 50%;
		}
		.van-cell {
			padding: 0 !important;
		}
		.wire {
			padding: 2px 5px;
			border: 1px solid #999999;
			position: relative;
			margin-bottom: 4px;
			span {
				position: absolute;
				left: 4px;
				top: 5px;
				z-index: 99;
				color: #7b83a0;
				font-size: 12px;
			}
		}
		.val {
			color: #7b83a0;
			font-size: 12px;
			text-align: right;
			margin-bottom: 12px;
		}
	}
	
	.tab_item {
		height: 30px;
		position: relative;
		text-align: center;
	}
	
	.tab1 {
		position: absolute;
		left: 0;
		top: 0;
		width: 55%;
		height: 30px;
		line-height: 30px;
		background: #58a;
		background: linear-gradient(-135deg, transparent 20px, #212639 0) top right;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		&.on {
			background: linear-gradient(-135deg, transparent 20px, #30c694 0) top right;
		}
	}
	
	.tab2 {
		position: absolute;
		right: 0;
		top: 0;
		height: 30px;
		line-height: 30px;
		width: 55%;
		height: 30px;
		line-height: 30px;
		background: #58a;
		background: linear-gradient(45deg, transparent 20px, #212639 0) bottom left;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		&.on {
			background: linear-gradient(45deg, transparent 20px, #fa4a61 0) bottom left;
		}
	}
	
	.choice {
		font-size: 13px;
		margin-bottom: 16px;
		span {
			display: block;
			background: #212639;
			text-align: center;
			line-height: 30px;
			border-radius: 5px;
			color: #8991b1;
		}
		.on {
			background: #4d597e;
			color: #fff !important;
		}
	}
	
	.deal {
		font-size: 12px;
		color: #7b83a0;
		margin-bottom: 10px;
		span {
			color: #fa4a61;
		}
	}
	
	.price_float {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		font-size: 12px;
		color: #7b83a0;
		padding-bottom: 5px;
		.flex__item {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
		}
	}
	
	.red {
		color: #fa4a61;
	}
	
	.green {
		color: #03ba98;
	}
	
	.statistics {
		.red {
			font-size: 14px;
		}
		padding:8px 0;
		text-align: right;
		font-size: 12px;
		color:#8f98b8;
	}
	
	.wt {
		padding: 10px;
		position: relative;
		.operate {
			color: #848cab;
			i {
				display: inline-block;
				background: url(./../assets/images/wt.png) no-repeat;
				background-size: 20px;
				width: 20px;
				height: 20px;
				vertical-align: middle;
				margin-left: 4px;
			}
		}
	}
	
	.weui-cell:before {
		border-top: 1px solid #393958;
	}
	
	.measure {
		font-size: 12px;
		color: #9ca5c6;
		border-bottom: 10px solid #282d41;
		.weui-flex {
			padding: 10px;
		}
		i {
			font-size: 14px;
			display: block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 50%;
			color: #fff;
			margin-right: 10px;
		}
		p {
			font-size: 14px;
			color: #fff;
		}
		.time {
			color: #fff;
		}
	}
	
	/deep/ .buyo.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	/deep/ .buyo .van-button--small {
		margin-top: 0px;
	}
	
	/deep/ .buyo .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .buyo .van-button {
		height: 35px;
		line-height: 35px;
	}
	
	/deep/.weui-cells:after {
		border-bottom: 0;
	}
</style>